<template>
    <div id="app">
        <nav>
            <van-tabbar v-model="active" v-show="active != 3">
                <van-tabbar-item @click="test('recommend')" icon="home-o">主页</van-tabbar-item>
                <van-tabbar-item @click="test('bookshelf')" icon="orders-o">书架</van-tabbar-item>
                <van-tabbar-item @click="test('my')" icon="friends-o">我的</van-tabbar-item>
            </van-tabbar>
        </nav>
        <router-view />
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0,
            flat: true,
        };
    },
    //
    methods: {
        test(x) {
            if (this.$route.name != x) {
                this.$router.push({ name: x });
            }
        },
    },

    updated() {
        this.$nextTick(() => {
            if (this.$route.name == "recommend" || this.$route.name == "details" || this.$route.name == "ranking" || this.$route.name == "classification") {
                this.active = 0;
            } else if (this.$route.name == "bookshelf") {
                this.active = 1;
            } else if (this.$route.name == "my" || this.$route.name == "glance" || this.$route.name == "person") {
                this.active = 2;
            } else if (this.$route.name == "browse") {
                this.active = 3;
            } else {
                this.active = 4;
            }
        });
    },
    created() {
        if (!sessionStorage.getItem("huandao")) {
            this.$dialog.alert({
                title: "环岛动漫",
                message: "欢迎来到环岛,祝你旅行愉快",
                confirmButtonColor: "#fdcbf1",
            });
            sessionStorage.setItem("huandao", 1);
        } else {
            return;
        }
    },
    destroyed() {
        sessionStorage.clear();
    },
};
</script>
<style lang="scss">
@import url(./static/style/reset.css);
@import "./static/style/variable.scss";
html {
    font-size: 37.5px;
}
#app {
    width: 100%;
    height: 667px;
    background: white;
}
.van-tabbar-item--active {
    color: $activeColor;
}
</style>
